<template>
	<view>
		<!-- 如果视频进度时间 == 弹幕时间 才开始跑 -->
		<!-- <view v-if="current_item==item.time&&item.is==true"> -->
		<!-- 弹幕 -->
		<!-- </view> -->
		<!-- 然后弹幕跑的时候执行动画，从右边跑到左边 -->
		<!-- 当到达左边不可见的区域时，销毁当前弹幕元素 -->

		<!-- 方案1 -->
		<view class="danmu-list">
			<!-- n轨道 -->
			<view v-for="(rows,i) in danmu_list" 
			:key="'cell_0'+rows.cell_id" 
			class="danmu-cell-row"
			:style="[
				{'opacity':Opacity},
				{'width':Width+'px'},
				{'height':(FontSize*2)+2+4+'px'}
			]">
				<!-- n轨道里的弹幕item数据 第一个弹幕需要靠在屏幕的最右边，后面的一次向右边靠齐 index从0开始，所以需要加1 -->
				<!-- isend = 弹幕是否跑完了，没跑完才渲染，否则不渲染 -->
				<view v-for="(item,index) in rows.danmu_cell" :key="'cell_0'+rows.cell_id+'_pao_'+item.id"
					:ref="'cell_0'+rows.cell_id+'_pao_'+item.id" :id="'cell_0'+rows.cell_id+'_pao_'+item.id"
					class="duanmu-item-pao" 
					:style="[
						{'left': item.danmu_Width <= Width ? Width+'px':'0px'},
						{'transform': item.danmu_Width <= Width ? 'translateX(100%)':'translateX(100%)'},
						{'width': item.danmu_Width+avatar_m_right+10+'px'},
						{'height': (FontSize*2)+2+4+'px'},
						{'border': item.border||item.useradd_border},
						{'border-radius': item.border_radius+'px' || item.useradd_border ? (FontSize*2)+2+4+'px' : item.border_radius+'px'},
						{'opacity': item.opacity||'1'},
					]">
					<!-- 如果弹幕宽度小于屏幕宽度，则left=屏幕宽度，动画x=0%，否则left=0，动画x=100% -->
					<!-- view渐变色背景 -->
					<view class="linear-gradient"
					v-if="item.background_image"
					:style="[
						{'border-radius': item.border_radius+'px' || item.useradd_border ? (FontSize*2)+2+4+'px' : item.border_radius+'px'},
						{'width': item.danmu_Width+avatar_m_right+10-2+'px'},
						{'height':(FontSize*2)+2+4-2+'px'},
						{'background-image': item.background_image},
						{'opacity':item.background_image_opacity}
					]"
					></view>
					<view class="danmu-item-text">
						<image v-if="item.avatar" class="Image"
						:src="item.avatar" mode="widthFix"
						:style="[
							{'margin-right': avatar_m_right/2+'px'},
							{'border-radius':(FontSize*2)+2+'px'},
							{'width':(FontSize*2)-5+'px'},
							{'height':(FontSize*2)-5+'px'}
						]"
						></image>
						<text .class="app-text app-ttf-default"
						:style="[
							{'color': item.color},
							{'font-size': FontSize+'px'}
						]"
						>{{item.text}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 测试用的 -->
		<view v-if="false" class="danmulist-width">
			<view class="danmu-cell-item-width">
				<text .class="app-text colorf1">{{Width}}</text>
				<text .class="app-text colorf1">{{filter_count}}</text>
			</view>
		</view>
		<!--  -->
	</view>
</template>

<script>
	var sys = uni.getSystemInfoSync()
	import MixinsAnimation from './mixins/animation.js'
	import MixinsBarrage from './mixins/barrage.js'
	export default {
		mixins:[
			MixinsAnimation,
			MixinsBarrage,
		],
		name: "FatFatMeng-barrage",
		props: {
			// 是否是VIP会员
			isUserVIP:{
				type:Boolean,
				default:false
			},
			// 屏幕宽度（已废弃）
			ScreenWidht:{
				type:Number,
				default:0
			},	
			// 是否全屏状态
			isFull:{
				type:Boolean,
				default:false
			},
			// 进入全屏时屏幕宽度
			goFullWidth:{
				type:Number,
				default:0
			},
			// 退出全屏时屏幕宽度
			extFullWidth:{
				type:Number,
				default:0
			},

			// 同一轨道的弹幕间距
			rowGap: {
				type: Number,
				default: 30
			},
			// （速度）弹幕持续时间（弹幕的头和尾巴跑完屏幕不可见区域需要的时间）
			duration: {
				type: Number,
				default: 6000
			},
			// （显示区域）弹幕轨道数（最小1，最大5，默认2）
			danmu_cell_num: {
				type: Number,
				default: 2
			},
			// （字号）弹幕字体大小
			FontSize:{
				type: Number,
				default: 14
			},
			// （透明度）弹幕盒子整体透明度
			Opacity:{
				type:Number,
				default:1
			},
			// 弹幕 - 用户头像距离右边间隔的范围
			avatar_m_right:{
				type:Number,
				default:10
			},
			

			//@1-1 如果用户发的弹幕是插入到轨道id2,假设次数轨道id2上队列了100个弹幕，
			//@1-2 那用户的弹幕就进入了排队，这是不对的，此时的做法就是把轨道id2上的所有队列弹幕全部干掉，类似节流

			//@2-1 当跑完的弹幕，用shit方法会出现bug，导致会出现重叠现象，那要怎么节约内存呢？
			//@2-2 我让弹幕item加个v-if="danmuku_0n[弹幕索引].isend"，isend代表是否跑结束了？（是否跑完了）
			//@2-3 当弹幕item开始跑的时候，就往弹幕item里push个isend，跑完的时候，再修改isend
			//@2-4 当弹幕item跑完了，isend发送了变化，就不让他渲染，这样就可以节约内存消耗

			//@3-1 reset 清除弹幕 => 如果用户在外面手动关闭了弹幕，则清空所有轨道里的弹幕item


			//@4-1 如果n轨道的弹幕item队列中数量大于30-50，则直接清除

			//@5
		},
		data() {
			return {
				// 屏幕宽度（这里宽度是外面传进来的，因为全屏时，会更大）
				Width: sys.screenWidth,
			};
		},
		watch: {
			// 监听弹幕轨道数发生变化
			danmu_cell_num: {
				async handler(newNum, oldNum) {
					//console.log('共有轨道数 = '+newNum)
					// 执行添加轨道数
					await this.getDanmu_list(newNum).then(res => {
						//console.log('轨道数组')
						this.danmu_list = res
					})
					// 直接添加对应轨道的flag
					await this.getDanmu_unm_flag(newNum).then(res => {
						//console.log('轨道对应的flag-节流阀数组')
						this.danmu_unm = res
					})
					
				},
				immediate: true
			},
			// 弹幕轨道编号发生编号时
			num:{
				async handler(newNum,oldNum){
					
				}
			},
			// 监听屏幕宽度发生变化，动态更改Width
			ScreenWidht:{
				async handler(newWidth,oldWidth){
					/* @1. 当屏幕宽度发生变化时，就是进入全屏或退出全屏
					 * @2. 这时候就要先清空弹幕数据，减少内存占用
					 * @3. 当退出全屏时修改弹幕持续时间，时间/3
					 */
					
					// @1. 修改屏幕宽度（ps => 已移步至isFull监听修改）

					// @2. 清空所有轨道中的弹幕数据
					this.getDanmu_list_empty()
				},
				deep:true,
			},
			isFull:{
				handler(newFull,oldFull){
					// 修改进入全屏时屏幕宽度（不管是进入全屏还是没进入全屏，都用全屏的宽度）
					this.Width = this.goFullWidth

					/* ps => 统一用全屏的宽度，不然如果退出全屏再进入全屏，弹幕就会停在屏幕可视区，因为屏幕长度发送了变化，跑的距离变短了 */
					// if (newFull==true){
					// 	// 修改进入全屏时屏幕宽度
					// 	this.Width = this.goFullWidth
					// }else {
					// 	// 修改退出全屏时屏幕宽度
					// 	this.Width = this.extFullWidth
					// }
				},
				deep:true,
				immediate:true,
			},

		},
		methods: {
			// 代码已迁移至 ./mixins/barrage.js
		}
	}
</script>

<style lang="scss" scoped>
	@import './barrage.scss';
</style>
